<!--
 * @Author: 无处安放的六月
 * @Date: 2023-12-05 16:44:47
 * @LastEditors: 无处安放的六月
 * @LastEditTime: 2023-12-06 15:31:58
 * @FilePath: \WEB\src\views\basicInfo\system\user\components\permissionSetting.vue
 * @Description: 人员分配权限
-->
<template>
  <el-dialog v-dialogDrag :visible.sync="dialogVisible" :title="title" width="750px" top="7vh">
    <button-group ref="buttonGroup" @submitForm="savePermission('ruleForm')" @cancel="dialogVisible = false" />
    <el-row>
      <el-button icon="el-icon-check" @click="setCheckedAllKeys">全选</el-button>
      <el-divider direction="vertical" content-position="center" />
      <el-button icon="el-icon-close" @click="resetChecked">清空</el-button>
      <el-divider direction="vertical" content-position="center" />
      <el-input v-model="filterText" placeholder="输入关键字进行过滤" style="max-width: calc(100% / 2); margin: 10px 0" />
      <el-divider direction="vertical" content-position="center" />
      <el-button type="primary" icon="el-icon-edit-outline" @click="savePermission">保存</el-button>
      <el-tree
        ref="tree"
        v-loading="loading"
        style="margin-left:10px;height: 500px;overflow: auto;"
        node-key="id"
        show-checkbox
        class="filter-tree menu-tree"
        :accordion="true"
        :check-on-click-node="false"
        :expand-on-click-node="true"
        :data="treeData"
        :props="treeProps"
        :filter-node-method="filterNode">
          <span slot-scope="{ data }" class="custom-tree-node">{{ data.name }}</span>
      </el-tree>
    </el-row>
  </el-dialog>
</template>
<script>
import { getUserMenu } from '@/api/user'
export default {
  props: {
    compInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      title: '权限设置',
      dialogVisible: false,
      filterText: '',
      loading: false,
      treeData: [],
      treeProps: [
        {
          label: 'name',
          children: 'children'
        }
      ],
      selectUserList: []
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted() {},
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    /**
     * @description: 新增编辑
     * @param {*} arr
     * @return {*}
     */
    async showDialog(arr) {
      this.selectUserList = arr
      this.dialogVisible = true
      const res = await getUserMenu(arr[0].accountUserId)
      if (res?.data.code === 200) {
        const checkMenuIdList = []
        this.treeData = res.data.data
        this.treeData.forEach((item) => {
          if (item.allocated === 1) {
            this.pushMenuId(checkMenuIdList, item)
          }
        })
        this.$refs.tree.setCheckedKeys(checkMenuIdList)
        setTimeout(() => {
          this.loading = false
        }, 100)
      }
    },
    /**
     * @description: 设置全选
     * @return {*}
     */
    setCheckedAllKeys() {
      this.$refs.tree.setCheckedNodes(this.treeData)
    },
    /**
     * @description: 清空
     * @return {*}
     */
    resetChecked() {
      this.$refs.tree.setCheckedKeys([])
    },
    /**
     * 树节点选中已选项
     * @param checkMenuIdList
     * @param data
     */
    pushMenuId(checkMenuIdList, data) {
      if (data.children && data.children.length > 0) {
        data.children.forEach((item) => {
          this.pushMenuId(checkMenuIdList, item)
        })
      }
      if (!data.children && data.allocated === 1) {
        checkMenuIdList.push(data.id)
      }
    },
    /**
     * @description: 保存权限
     * @return {*}
     */
    async savePermission() {
      const checkedList = this.$refs['tree'].getCheckedNodes().map(item => {
        item.allocated = 1
        return item
      })
      const halfCheckedList = this.$refs['tree'].getHalfCheckedNodes().map(item => {
        item.allocated = 1
        return item
      })
      const res = await this.$axios.post('/comp/menu/save', {
        compId: this.compInfo.compId,
        userIds: this.selectUserList.map(item => item.accountUserId),
        list: [...checkedList, ...halfCheckedList]
      })
      if (res?.data.code === 200) {
        this.$message.success('保存成功')
        this.dialogVisible = false
      }
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
